<!-- 提现记录 -->
<template>
  <van-nav-bar
    left-arrow
    :title="$t('notic.title')"
    @click-left="router.back()"
  >
  </van-nav-bar>
  <table class="app-pad table draw">
    <tr class="table-th">
      <th v-for="item in list" :key="item">{{ $t(`notic.${item}`) }}</th>
    </tr>
    <tr
      v-for="(items, index) in nums"
      :key="index"
      class="table-tr"
      @click="onJump(items)"
    >
      <td>
        <span class="max-width van-ellipsis">{{
          items.createTime ? items.createTime.split(" ")[0] : items.createTime
        }}</span>
      </td>
      <td>
        <span class="max-width van-ellipsis">{{ items.noticeTitle }}</span>
      </td>
      <td>
        <span
          :class="{ fail: items.isRead == 0, success: items.isRead == 1 }"
          >{{ items.isRead == 0 ? $t("notic.noRead") : $t("notic.read") }}</span
        >
      </td>
    </tr>
  </table>
  <Empty :description="$t('wallet.noHistory')" v-if="!nums.length"></Empty>
</template>
<script setup>
import Empty from "@/components/Empty";
import { reactive, ref } from "@vue/reactivity";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { onMounted } from "vue";
import { noticelist } from "@/api/home";
const { t } = useI18n();
const router = useRouter();

const list = ["date", "content", "idRead"];
let nums = ref([]);
onMounted(async () => {
  let res = await noticelist().catch((err) => {
    console.log(err);
  });
  nums.value = res.data;
  // Object.assign(nums, res.data);
  console.log(nums);
});
function onJump(val) {
  router.push({ path: "/noticdetail", query: { noticeId: val.noticeId } });
}
</script>
<style lang="less">
.draw {
  .success {
    color: #e50000;
  }
  .fail {
    color: #17c600;
  }
}
.max-width {
  display: inline-block;
  max-width: calc(33vw);
}
.draw-right {
  font-size: 12px;
  font-weight: 500;
}
</style>
